<template>
    <ul class="slist">
        <li v-for="(l, i) in list" :key="i">
          <router-link :to="{ name:'good', params: { gid: l.id }, query: { name: l.name } }">
              <img :src="l.img" class="simg" alt="">
              <h2 class="name"> {{ l.name }} </h2>
              <div class="col">
                <p class="price">¥ {{ l.price }}</p>
                <p class="type"> {{ l.type.text }} </p>
              </div>
          </router-link>
      </li>
    </ul>
</template>

<script>
export default {
    props: ['list']
}
</script>

<style lang="scss" scoped>
  .slist {
    padding:0 15px;
    li {
      margin-top:15px;
      width:100%;
      border-radius: 10px;
      box-shadow: 2px 2px 2px 2px #b5b5b5;
      overflow: hidden;
      a {
        display: block;
        img {
            width:100%;
        }
        .name {
            color: #191a1b;
            font-size: 16px;
            display: block;
            max-width: 100%;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding:0 5px;
            margin-top:8px;
        }
        .col {
            margin-top:8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            padding:0 5px 15px 5px;
            .price {
                color:#f50;
            }
            .type {
                color:#0f0;
            }
        }
      }
    }
  }
</style>